<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/7/15
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>
        购物车
    </title>
    <script>
       function submit_form() {
           $("#cart_form").submit();
       }
    </script>
    <script type="text/javascript">

        $(function () {
            //购物车的总长度
            var cartLength=$("#cart_check label").length;
            //记录当前购物车的长度
            var current=0;

            $('#cartsAllBtn').click(function(){

               if ($(this).hasClass("checked"))
               {
                   //alert("选中");
                   //全部被选中
                   //$("#cart_check label").attr("class","checkbox checked");
                   $("#cart_check label").each(function () {
                       if ($(this).hasClass("checkbox checked")==false){
                           //给label按钮添加属性，选中样式变为选中状态
                           $(this).attr("class","checkbox checked");
                           //复选框添加上选中属性
                           $(this).parent().children('input').attr("checked","checked");

                           $.post('${ctx}/shopping/getCartItem',{'cid':this.id},function (json) {
                               if(json.cart!=null&&json.cart!=undefined){
                                   var cartPrice=parseFloat(json.cart.productPrice)*parseInt(json.cart.productNum);
                                   var price=$("#total_price").text();
                                   if(price!=null&&price!=undefined&&price!=''){
                                       //累计总价格
                                       $("#total_price").text(cartPrice+parseFloat(price));
                                   }else {
                                       $("#total_price").text(cartPrice);
                                   }
                                   current++;//长度加1
                               }else window.location.href="${ctx}/error";
                               if(json.url!=null&&json.url!=undefined)
                                   window.location.href="${ctx}/"+json.url;
                           },'json');
                       }
                   })
               }else{
                   //alert("未选中");
                   //$("#cart_check label").attr("class","checkbox");

                   $("#cart_check label").each(function () {
                       $(this).attr("class","checkbox");
                   })
                   $("#total_price").text('');
               }
//
            });

            //给每个商品选项的label添加单击事件
            $("#cart_check label").bind('click',function () {
                if ($(this).hasClass("checked")){
//                    alert("被选中");
//                    alert(this.id);
                    $.post('${ctx}/shopping/getCartItem',{'cid':this.id},function (json) {
                        if(json.cart!=null&&json.cart!=undefined){
                            var cartPrice=parseFloat(json.cart.productPrice)*parseInt(json.cart.productNum);
                            var price=$("#total_price").text();
                            if(price!=null&&price!=undefined&&price!=''){
                                //累计总价格
                                $("#total_price").text(cartPrice+parseFloat(price));
                            }else {
                                $("#total_price").text(cartPrice);
                            }
                            //长度加1，如果长度等于总长度，那么全选按钮选中
                            current++;
                            if(current==cartLength) $('#cartsAllBtn').attr("class","checkbox checked");
                        }else window.location.href="${ctx}/error";
                        if(json.url!=null&&json.url!=undefined)
                                window.location.href="${ctx}/"+json.url;
                    },'json');
//                    alert(price);
                }else {
                    //alert("没有被选中");
                    $.post('${ctx}/shopping/getCartItem',{'cid':this.id},function (json) {
                        if(json.cart!=null&&json.cart!=undefined){
                            var cartPrice=parseFloat(json.cart.productPrice)*parseInt(json.cart.productNum);
                            var price=$("#total_price").text();
                            if(price!=null&&price!=undefined&&price!=''){
                                //累计总价格
                                $("#total_price").text(parseFloat(price)-cartPrice);
                            }else {
                                $("#total_price").text('');
                            }
                            //长度减1，全选按钮不选中
                            current--;
                           $('#cartsAllBtn').attr("class","checkbox");
                        }else window.location.href="${ctx}/error";
                        if(json.url!=null&&json.url!=undefined)
                            window.location.href="${ctx}/"+json.url;
                    },'json');
                }
            })

        })
    </script>
    <title>购物车</title>

</head>
<body>
<%--<header>--%>
    <%--<h1>乐享数码店铺</h1>--%>
    <%--<a href="javascript:;"></a>--%>
<%--</header>--%>
<div id="check_box">
    <form action="${ctx}/shopping/settleAccountCart" method="post" id="cart_form">
    <article class="viewports">
        <ul class="imglist01 c3" id="cart_check">
            <input type="hidden" value="${shopId}" name="shopId"/>
            <c:forEach items="${cartList}" var="cart">
            <li class="mb10">
                <div class="layout-box ptb20">
                    <div class="A-checkbox mr20 pt50"><input class="subBox" type="checkbox" value="${cart.cartId}" name="carts"/><label id="${cart.cartId}"></label></div>
                    <div class="ith_img usernane_img140 mr20">
                        <span class="bg_span" style="background-image:url(${cart.productImage});"></span>
                    </div>
                    <div class="box-col">
                        <h2 class="fs28 hgt2">${cart.productName} ${cart.productAttribute}</h2>
                        <div class="fs24 ca mt20">
                            <span class="c-cb1448">&yen;<span id="${cart.cartId}_price">${cart.productPrice}</span></span>
                                <span class="num_addjian r5 r">
                                    <input class="t_btn t_jian" type="button" id="jian" value="-" />
                                    <input class="t_txt t_num" type="text" value="${cart.productNum}" id="num"/>
                                    <input class="t_btn t_add" type="button" id="add" value="+" />
                                </span>

                        </div>
                    </div>
                </div>
            </li>
            </c:forEach>

        </ul>
    </article>
    </form>
    <div class="buy_height"></div>
    <div class="bottom_buy layout-box tac">
        <div class="b-ffffff box-col tal pl20">
            <div class="A-checkbox pt15 l mr30">
                <input class="subBox" type="checkbox"  id="cartsAll"/>
                <label id="cartsAllBtn"></label>
            </div>
            总价：<span class="c-cb1448">&yen;<span id="total_price"></span></span>
        </div>
        <a class="b-ffaa3b cf plr50" id="submit" onclick="submit_form()">去结算</a>
    </div>
    <!--end 底下购物按钮-->
</div>
</body>
</html>
